<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_分区元素</title>
</head>
<body>
    <!--1.添加颜色-->
    <!--行内分区元素 span，不会换行-->
    这周还需要上<span style="color:orange;">三天</span>课<br>

    欢迎各位<span style="color:red;">小可爱</span>进入<span style="color:green;">JSDTN2504</span>
    的<span style="color:blue">第三阶段</span>进行学习！

    <!-- hr 独占一行的灰色水平分割线-->
    <hr>
    <span>我是行内分区元素</span>
    <span>我是行内分区元素</span>
    <span>我是行内分区元素</span>

    <hr>
    <!--块内分区元素 div 没有文字效果，独占一行-->
    <div>我是块内分区元素</div>
    <div>我是块内分区元素</div>
    <div>我是块内分区元素</div>

    <hr><!--旧版-->
    <div class="header">我是顶部条</div>
    <div class="nav">我是导航栏</div>
    <div class="main">我是主题内容</div>
    <div class="aside">我是侧边栏</div>
    <div class="footer">我是尾部</div>

    <hr><!--新版-->
    <header>我是顶部条</header>
    <nav>我是导航栏</nav>
    <main>我是主题内容</main>
    <aside>我是侧边栏</aside>
    <footer>我是尾部</footer>
</body>
</html>